<template>
    <div class="fullScreen bg-c-g tx-s-14 tx-c-222">
        <m-header :msg="$route.query.name"></m-header>
        <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
            <div class="bg-c-wh padd-lr">
                <div class="flex-box line-box">注册时间：
                    <span class="tx-c-666">{{data.regiTime}}</span>
                </div>
                <div class="flex-box flex-ac flex-pj line-box"> 
                    <div>会员类型：<span class="tx-c-666">{{data.types | type()}}</span></div>
                    <div v-if="data.types == 3" class="btn tx-c" @click="confirm()">升级</div>
                </div> 
                <div class="flex-box flex-ac flex-pj line-box">
                    <div>赔率值：<span class="tx-c-666">{{data.pl}}</span></div>
                    <div class="btn tx-c" @click="modify()">修改</div>
                </div>
                <div class="flex-box line-box">下级会员人数：
                    <span class="tx-c-666">{{data.lowers}}</span>
                </div>
            </div>
        </mescroll-vue>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import MescrollVue from 'mescroll.js/mescroll.vue'
import { isEmptyObject } from '../../common/js/common'
import { lowMemberInfo, memberToB } from '../../common/js/axiosUtil' 
export default { 
    data() {
        return { 
            data : '',
            mescroll: null, // mescroll实例对象
            //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
                noMoreSize: 5 //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            }
        }
    },
    filters : {
        // type类型文字
        type : function(type){
            if(type == 2){
                return 'B级代理'
            }else{
                return '会员'
            }
        }
    },
    methods: {
        // 确定
        confirm () { 
            const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
            this.$vux.confirm.show({
                // 组件除show外的属性
                title: '',
                content: '确定要升级此代理为B级会员？',
                cancelText: '取消',
                confirmText: '升级',
                hideOnBlur: true,
                onCancel () {
                },
                onConfirm () {
                    _this.upgrade()
                }
            }) 
        },
        // 升级会员
        upgrade () {
            let params = this.$params(1)
            params.append('oid', this.$route.query.id)
            memberToB(params)
            .then((response)=> { 
                if(response.data.code == "200"){
                    this.getData()
                    this.$toast('升级成功', 2000)
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        // 修改赔率
        modify () {
            const pl = this.data.pl
            this.$router.push({
                path : '/vipModify',
                query : {
                    id : this.$route.query.id,
                    pl : pl.substr(0, pl.length-1)
                }
            })
        },
        // 获取会员信息
        getData () {
            let params = this.$params(1)
            params.append('oid', this.$route.query.id)
            lowMemberInfo(params)
            .then((response)=> { 
                if(response.data.code == "200"){
                    this.data = response.data.data
                } else {
                    this.$logAgain(response.data.msg)
                }
                // 隐藏下拉刷新状态;
                this.mescroll.endSuccess(1)
            })
            .catch((error)=> {
                // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                this.mescroll.endErr()
                this.$toast('请求服务失败', 2000)
            })
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll 
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback () {
            this.getData()
        }
    },
    components: {
        MHeader,
        MescrollVue
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .padd-lr
        padding: 0 .75rem
    .line-box
        line-height : 3rem
        background: white
        border-bottom: 1px solid #f0eff5
    .btn
        width: 4rem
        line-height: 1.75rem
        color: white
        background: #d41911
</style>

